<template>
  <!-- 点赞 -->
  <div class="box">
    <van-cell-group>
      <van-field
        readonly
        label="受赞赏人"
        placeholder="请选择赞赏人"
        is-link
        v-model="personnel"
        @click="showDepartmentList"
      >
      </van-field>
    </van-cell-group>
    <van-cell-group>
      <van-field
        type="digit"
        center
        clearable
        v-model="number"
        label="赞赏数量"
        :placeholder="'请输入赞赏福分(可用'+arr_num+'福分)'"
      >
      </van-field>
    </van-cell-group>
    <van-cell-group>
      <van-field
        readonly
        clickable
        label="标签"
        :value="value"
        placeholder="选择标签"
        @click="showPicker = true"
      />

      <van-popup
        v-model="showPicker"
        position="bottom"
        round
      >
        <van-picker
          show-toolbar
          :default-index="2"
          :columns="list"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="message"
        rows="5"
        :style="{borderTop:'1px solid silver',borderBottom:'1px solid silver'}"
        label="赞赏理由"
        type="textarea"
        placeholder="请输入赞赏理由"
        show-word-limit
      />
    </van-cell-group>
    <van-button
      round
      :style="{width:'95%',height:'5.5vh',lineHeight:'5.5vh',position:'fixed',left:'10px',bottom:'15px',zIndex:'1px'}"
      color="#3C9BFB"
      @click="showSuccess"
    >赞赏</van-button>
  </div>
</template>

<script type="text/javascript">
import {
  Cell,
  CellGroup,
  RadioGroup,
  Radio,
  Search,
  Checkbox,
  CheckboxGroup
} from "vant";
import { Field,Toast,Picker,Popup,Button } from "vant";

export default {
  data() {
    return {
      people: true,
      message: "",
      value: "",
      radio: "1",
      showPicker: false,
      list: [],
      number: "",
      arr: [],
      show_department: false,
      userArr: [],
      depart: [],
      personnel: "",
      id: 0,
      userId_p: 0,
      corpId_p: 0,
      event_id: 0,
      arr_num: 0
    };
  },
  components: {
    [Field.name]: Field,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Search.name]: Search,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Toast.name]:Toast
  },
  created() {
    this.userId_p = localStorage.getItem("userId");
    this.corpId_p = localStorage.getItem("custid");
    this.show_jsapi();
    this.getEvent();
    this.getAppreciateSet();
    this.id = this.$route.query.dd_id;
    this.personnel = this.$route.query.dd_name;
    this.message = this.$route.query.event;
    this.event_id = this.$route.query.event_id;
    dd.biz.navigation.setTitle({
      title: "赞赏" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    /**
     * rfj
     * 标签
     */
    async show_jsapi() {
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let url = location.href.split("#")[0];
      const res = await this.$http.get(
        `dingapi/getJsapiConfig?corpId=${corpId}&url=${url}`
      );
      let config = res.data.data;
      localStorage.setItem("appId", config.agentId);
      dd.config({
        agentId: config.agentId,
        corpId: config.corpId,
        timeStamp: config.timeStamp,
        nonceStr: config.nonceStr,
        signature: config.signature,
        jsApiList: [
          "runtime.info",
          "biz.ding.post",
          "biz.ding.create",
          "biz.chat.pickConversation",
          "device.notification.prompt",
          "device.notification.confirm",
          "device.notification.alert",
          "biz.navigation.setRight",
          "biz.chat.open",
          "biz.util.open",
          'biz.util.openLink',
          "biz.user.get",
          "biz.contact.choose",
          "biz.telephone.call",
          "biz.util.uploadImage",
          // "device.accelerometer.watchShake",
          // "biz.map.locate",
          // "device.geolocation.get",
          "biz.customContact.choose",
          "biz.contact.complexPicker",
          "biz.contact.departmentsPicker",
        ]
      });
    },
    // 标签事件
    async getEvent() {
      const res = await this.$http.get(
        `/yuepoints/Event?corpId=${this.corpId_p}&type=1`
      );
      const {
        data: { data }
      } = res;

      for (let i = 0; i < data.length; i++) {
        this.list.push(data[i].name);
      }
    },
    // 默认数据
    async getAppreciateSet() {
      const request = await this.$http.get(
        `/yuepoints/getAppreciateSet?corpId=${this.corpId_p}&userId=${this.userId_p}`
      );
      this.arr = request.data;
      this.arr_num = request.data.data.balance;
    },
    // 赞赏
     async showSuccess() {
      const val = this.message;
      const label = this.value;
      const num = this.number;
      if (this.event_id == undefined) {
        this.event_id = "";
      }
      const {
        data: { balance, quota_c, quota_max_c }
      } = this.arr;
      if (balance >= num) {
      } else {
        this.$toast("超出可用福分");
        return false;
      }
      if (Number(quota_c) <= Number(num)) {
      } else {
        this.$toast("福分不能低于" + quota_c);
        return false;
      }
      if (Number(quota_max_c) >= Number(num)) {
      } else {
        this.$toast("不能超出福分" + quota_max_c);
        return false;
      }
      Toast.loading({
        message: "数据提交中",
        forbidClick: true,
        loadingType: "spinner"
      });
      const res = await this.$http.get(
        `/yuepoints/sendPraise?corpId=${this.corpId_p}&userId=${this.userId_p}&praisedPerson=${this.id}&desc=${val}&taggingLabel=${label}&balance=${num}&type=0`
      );
      if (res.data.errcode == "0000") {
        Toast.success("赞赏成功");
        this.$router.replace("/home");
      } else {
        this.$toast(res.data.errmsg);
      }
    },
    // 选择赞赏人
    async showDepartmentList() {
      let corpId = localStorage.getItem("custid");
      let appId = localStorage.getItem("appId");
      let _this = this;
      dd.biz.contact.complexPicker({
        title: "受赞赏人", //标题
        corpId: corpId, //企业的corpId
        multiple: false, //是否多选
        limitTips: "只能选择一人", //超过限定人数返回提示
        maxUsers: 1, //最大可选人数
        pickedUsers: [], //已选用户
        pickedDepartments: [], //已选部门
        disabledUsers: [], //不可选用户
        disabledDepartments: [], //不可选部门
        requiredUsers: [], //必选用户（不可取消选中状态）
        requiredDepartments: [], //必选部门（不可取消选中状态）
        appId: appId, //微应用的Id
        permissionType: "GLOBAL", //选人权限，目前只有GLOBAL这个参数
        responseUserOnly: true, //返回人，或者返回人和部门
        startWithDepartmentId: 0, // 0表示从企业最上层开始
        onSuccess: function(result) {
          _this.personnel = result.users[0].name;
          _this.id = result.users[0].emplId;
        },
        onFail: function(err) {}
      });
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  // padding:10px 0px;
  /deep/ .van-radio--disabled {
    height: 42px;
    padding-left: 15px;
  }
  /deep/ .van-radio__label--disabled {
    color: #000;
  }
  /deep/ .van-search {
    margin-bottom: 10px;
  }
  /deep/ .van-checkbox-group,
  .van-checkbox {
    background: #fff;
  }
  /deep/ .van-checkbox {
    padding: 10px;
    border-bottom: 1px solid rgb(230, 227, 227);
  }
  .personnel_text {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #59d1ff;
    font-size: 14px;
    line-height: 42px;
    color: #fff;
  }
  .department_list {
    font-size: 14px;
    color: #1989fa;
    border-left: 1px solid silver;
    padding-left: 5px;
    position: absolute;
    top: 12px;
    right: 12px;
  }
  .right {
    float: right;
  }
}
</style>
